<template>
  <div class="main">
    <div class="title">
      <div class="titleBlock"></div>
      <div class="titleText">预约体检</div>
    </div>
    <div class="table">
      <el-form :inline="true" class="tableHeader" :model="form">
        <el-form-item>
          <el-radio-group v-model="form.radio">
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1">待体检</el-radio>
            <el-radio :label="2">已完成</el-radio>
            <el-radio :label="3">已退款</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="value"
            type="daterange"
            start-placeholder="请选择开始日期"
            end-placeholder="请选择结束日期"
            @change="changeDate"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="multipleTableRef" :data="nowData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column property="patients_name" label="姓名" width="120" />
        <el-table-column property="card_number" label="就诊卡号" width="150" />
        <el-table-column
          property="patients_id_number"
          label="身份证号"
          width="220"
        />
        <el-table-column
          property="patients_phone"
          label="手机号码"
          width="150"
        />
        <el-table-column property="packageName" label="套餐" width="200" />
        <el-table-column property="packagePrice" label="费用" width="120" />
        <el-table-column property="patients_status" label="状态" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.patients_status == 1" type="" color="#fff"
              >待体检</el-tag
            >
            <el-tag
              v-else-if="scope.row.patients_status == 2"
              type="success"
              color="#fff"
              >已完成</el-tag
            >
            <el-tag
              v-else-if="scope.row.patients_status == 3"
              type="info"
              color="#fff"
              >已退款</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          property="patients_TJDate"
          label="体检日期"
          width="120"
        />
        <el-table-column
          property="patients_appointmentTime"
          label="预约时间"
          width="180"
        />
        <el-table-column width="120" label="操作">
          <template #default="scope">
            <el-icon
              v-if="scope.row.patients_status != 3"
              color="#006eff"
              :size="23"
              @click="details(scope.row)"
              ><Tickets
            /></el-icon>
          </template>
        </el-table-column>
      </el-table>
      <page class="tableFooter" :count="count" @changePage="changePage"></page>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { getAppointmentMedical } from "../../utils/api/tiJian";
import page from "../../components/appointmentExamination/yema.vue";
import formDate from "../../utils/formatDay-wl";
export default {
  components: { page },
  props: {},
  setup() {
    const data = reactive({
      form: {
        radio: 0,
        startDate: null,
        endDate: null,
      },
      value: null,
      tableData: [],
      count: null,
      nowPage: 1,
    });
    const getAppointmentMedical2 = () => {
      getAppointmentMedical().then((data2) => {
        // console.log(data2);
        if (data2.data.code == 200) {
          data.tableData = data2.data.data;
          data.count = data.tableData.length;
          data.tableData.forEach((item) => {
            item.patients_TJDate = formDate(item.patients_TJDate);
          });
        }
      });
    };
    getAppointmentMedical2();
    const nowData = computed(() => {
      let qiShi = (data.nowPage - 1) * 3;
      return data.tableData.slice(qiShi, qiShi + 3);
    });
    const changePage = (page) => {
      data.nowPage = page;
    };

    const router = useRouter();
    const details = (row) => {
      // console.log(row);
      router.push({
        name: "appointmentDetails",
        params: { ...row },
      });
    };

    const changeDate = () => {
      // console.log(data.value);
      data.form.startDate = formDate(data.value[0]);
      data.form.endDate = formDate(data.value[1]);
    };

    const search = () => {
      getAppointmentMedical(data.form).then((dataS) => {
        // console.log(dataS);
        if (dataS.data.code == 200) {
          data.tableData = dataS.data.data;
          data.count = data.tableData.length;
          data.tableData.forEach((item) => {
            item.patients_TJDate = formDate(item.patients_TJDate);
          });
        }
      });
    };

    return {
      ...toRefs(data),
      details,
      nowData,
      changePage,
      search,
      changeDate,
    };
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 30px;
  box-sizing: border-box;
  .titleBlock {
    width: 50px;
    height: 13px;
    background-color: #006eff;
    border-radius: 20px;
  }
  .titleText {
    font-size: 30px;
    margin-left: 20px;
  }
}
.table {
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  .tableHeader {
    margin-bottom: 20px;
  }
  .tableFooter {
    // border: 1px solid red;
    padding: 30px;
    box-sizing: border-box;
    margin-top: 20px;
  }
}
</style>